/* ============================================================
   PRIZM Enterprise — demo token layer
   ------------------------------------------------------------
   Shared :root tokens for the static HTML demos
   (Internship-dashboard.html, Outreach-dashboard.html,
   Outreach-programmes.html).

   Values aligned to the deployed reference at
   https://toaproject.vercel.app/ (Tailwind slate-based palette,
   blue-600 accent). See docs/reference-spec.md for the audit
   that produced these values.
   ============================================================ */

:root {
  /* ── Typography ─────────────────────────────────────────────
     Font stack from the reference html { font-family } */
  --font-sans: system-ui, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Consolas, Monaco, "Liberation Mono", monospace;

  /* Type scale — matches reference .text-{role}-{size} utilities.
     Each variable resolves to "size / line-height" suitable for
     `font: var(--text-headline-lg) var(--font-sans)` shorthand. */
  --text-headline-lg-size: 1.75rem;   /* 28px */
  --text-headline-lg-lh:   2.25rem;   /* 36px */
  --text-headline-md-size: 1.25rem;   /* 20px */
  --text-headline-md-lh:   1.75rem;   /* 28px */
  --text-headline-sm-size: 1.125rem;  /* 18px */
  --text-headline-sm-lh:   1.5rem;    /* 24px */
  --text-body-lg-size:     1rem;      /* 16px */
  --text-body-lg-lh:       1.5rem;    /* 24px */
  --text-body-md-size:     0.875rem;  /* 14px */
  --text-body-md-lh:       1.25rem;   /* 20px */
  --text-body-sm-size:     0.75rem;   /* 12px */
  --text-label-md-size:    0.875rem;  /* 14px */
  --text-label-md-lh:      1.25rem;   /* 20px */
  --text-label-md-tracking: 0.02em;
  --text-label-sm-size:    0.75rem;   /* 12px */
  --text-label-sm-lh:      1rem;      /* 16px */
  --text-caption-bold-size: 0.6875rem;/* 11px */
  --text-caption-bold-lh:  1rem;      /* 16px */

  /* ── Table typography ────────────────────────────────────── */
  --toa-table-font-size: 13px;
  --toa-table-line-height: 18px;
  --toa-table-head-size: 12px;
  --toa-table-head-line-height: 16px;
  --toa-table-cell-py: 10px;
  --toa-table-cell-px: 12px;

  /* ── Backgrounds (Tailwind slate) ─────────────────────────── */
  --bg-bg:                 #f8fafc;   /* slate-50  */
  --bg-bg-subtle:          #f1f5f9;   /* slate-100 */
  --bg-bg-muted:           #e2e8f0;   /* slate-200 */
  --bg-surface:            #ffffff;
  --bg-surface-elevated:   #ffffff;

  /* ── Borders ──────────────────────────────────────────────── */
  --border-border:         #e2e8f0;   /* slate-200 */
  --border-border-strong:  #cbd5e1;   /* slate-300 */

  /* ── Text ─────────────────────────────────────────────────── */
  --text-fg:               #0f172a;   /* slate-900 */
  --text-fg-muted:         #475569;   /* slate-600 */
  --text-fg-subtle:        #64748b;   /* slate-500 */

  /* ── Accent (Tailwind blue) ───────────────────────────────── */
  --bg-accent:             #2563eb;   /* blue-600 */
  --bg-accent-hover:       #1d4ed8;   /* blue-700 */
  --text-accent:           #2563eb;
  --text-accent-fg:        #ffffff;

  /* ── Status ───────────────────────────────────────────────── */
  --text-danger:           #b91c1c;   /* red-700  */
  --bg-danger:             #fee2e2;   /* red-100  */
  --border-danger:         #fecaca;   /* red-200  — demo-only, ref has no border-danger */
  --text-success:          #15803d;   /* green-700*/
  --bg-success:            #dcfce7;   /* green-100*/
  --border-success:        #bbf7d0;   /* green-200 — demo-only */
  --text-warning:          #b45309;   /* amber-700*/
  --bg-warning:            #fef3c7;   /* amber-100*/
  --border-warning:        #fde68a;   /* amber-200 — demo-only */
  --text-info:             #0369a1;   /* sky-700  */
  --bg-info:               #e0f2fe;   /* sky-100  */
  --border-info:           #bae6fd;   /* sky-200  — demo-only */

  /* ── Chart palette (demo-only) ────────────────────────────── */
  --chart-blue:            #2563eb;   /* aligned to new accent */
  --chart-blue-2:          #60a5fa;   /* blue-400 */
  --chart-teal:            #0d9488;
  --chart-amber:           #f59e0b;
  --chart-violet:          #7c3aed;
  --chart-slate:           #94a3b8;
  --chart-emerald:         #10b981;
  --chart-rose:            #f43f5e;

  /* ── Radii (Tailwind defaults) ────────────────────────────── */
  --radius-sm:             0.125rem;  /* 2px  */
  --radius-md:             0.375rem;  /* 6px  */
  --radius-lg:             0.5rem;    /* 8px  — buttons, inputs */
  --radius-xl:             0.75rem;   /* 12px — cards, panels   */

  /* ── Shadows (Tailwind defaults) ──────────────────────────── */
  --shadow-sm:             0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md:             0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:             0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-xl:             0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);

  /* ── Source/style-audit aliases ──────────────────────────── */
  --color-bg: var(--bg-bg);
  --color-bg-subtle: var(--bg-bg-subtle);
  --color-bg-muted: var(--bg-bg-muted);
  --color-surface: var(--bg-surface);
  --color-surface-elevated: var(--bg-surface-elevated);
  --color-border: var(--border-border);
  --color-border-strong: var(--border-border-strong);
  --color-fg: var(--text-fg);
  --color-fg-muted: var(--text-fg-muted);
  --color-fg-subtle: var(--text-fg-subtle);
  --color-accent: var(--bg-accent);
  --color-accent-hover: var(--bg-accent-hover);
  --color-accent-fg: var(--text-accent-fg);
  --color-accent-subtle: #eff4ff;
  --color-danger: var(--text-danger);
  --color-danger-fg: #ffffff;
  --color-danger-bg: var(--bg-danger);
  --color-success: var(--text-success);
  --color-success-bg: var(--bg-success);
  --color-warning: var(--text-warning);
  --color-warning-bg: var(--bg-warning);
  --color-info: var(--text-info);
  --color-info-bg: var(--bg-info);

  /* ── TOA brand palette from audit ─────────────────────────── */
  --toa-blue: #4480db;
  --toa-teal: #36d1b5;
  --toa-green: #5bcb85;
  --toa-navy: #141c4a;

  /* ── PRIZM semantic aliases ───────────────────────────────── */
  --prizm-color-bg: var(--color-bg);
  --prizm-color-bg-subtle: var(--color-bg-subtle);
  --prizm-color-bg-muted: var(--color-bg-muted);
  --prizm-color-surface: var(--color-surface);
  --prizm-color-surface-elevated: var(--color-surface-elevated);
  --prizm-color-border: var(--color-border);
  --prizm-color-border-strong: var(--color-border-strong);
  --prizm-color-fg: var(--color-fg);
  --prizm-color-fg-muted: var(--color-fg-muted);
  --prizm-color-fg-subtle: var(--color-fg-subtle);
  --prizm-color-accent: var(--color-accent);
  --prizm-color-accent-hover: var(--color-accent-hover);
  --prizm-color-accent-fg: var(--color-accent-fg);
  --prizm-color-accent-subtle: var(--color-accent-subtle);
  --prizm-color-danger: var(--color-danger);
  --prizm-color-danger-fg: var(--color-danger-fg);
  --prizm-color-danger-bg: var(--color-danger-bg);
  --prizm-color-success: var(--color-success);
  --prizm-color-success-bg: var(--color-success-bg);
  --prizm-color-warning: var(--color-warning);
  --prizm-color-warning-bg: var(--color-warning-bg);
  --prizm-color-info: var(--color-info);
  --prizm-color-info-bg: var(--color-info-bg);
  --prizm-color-toa-blue: var(--toa-blue);
  --prizm-color-toa-teal: var(--toa-teal);
  --prizm-color-toa-green: var(--toa-green);
  --prizm-color-toa-navy: var(--toa-navy);

  /* ── React DayPicker / animated-border audit variables ───── */
  --ab-angle: 720deg;
  --rdp-accent-color: var(--color-accent);
  --rdp-accent-background-color: var(--color-accent-subtle);
  --rdp-today-color: var(--color-accent);
  --rdp-selected-border: 2px solid transparent;
  --rdp-day-height: 26px;
  --rdp-day-width: 26px;
  --rdp-day_button-height: 24px;
  --rdp-day_button-width: 24px;
  --rdp-day_button-border-radius: 4px;
  --rdp-nav_button-height: 22px;
  --rdp-nav_button-width: 22px;
  --rdp-nav-height: 26px;
}

/* ============================================================
   Typography utility classes
   Use these in HTML wherever the reference uses
   .text-{role}-{size}. Keeps demo markup readable.
   ============================================================ */

.text-headline-lg { font-size: var(--text-headline-lg-size); line-height: var(--text-headline-lg-lh); font-weight: 700; }
.text-headline-md { font-size: var(--text-headline-md-size); line-height: var(--text-headline-md-lh); font-weight: 600; }
.text-headline-sm { font-size: var(--text-headline-sm-size); line-height: var(--text-headline-sm-lh); font-weight: 600; }
.text-body-lg     { font-size: var(--text-body-lg-size);     line-height: var(--text-body-lg-lh);     font-weight: 400; }
.text-body-md     { font-size: var(--text-body-md-size);     line-height: var(--text-body-md-lh);     font-weight: 400; }
.text-body-sm     { font-size: var(--text-body-sm-size);                                              font-weight: 400; }
.text-label-md    { font-size: var(--text-label-md-size);    line-height: var(--text-label-md-lh);    font-weight: 600; letter-spacing: var(--text-label-md-tracking); }
.text-label-sm    { font-size: var(--text-label-sm-size);    line-height: var(--text-label-sm-lh);    font-weight: 500; }
.text-caption-bold{ font-size: var(--text-caption-bold-size);line-height: var(--text-caption-bold-lh);font-weight: 700; }